<template>
	<view class="content">
		<view class="content-box">
			<!-- 头部 -->
			<view class="position-navbar">
				<navigation :obj="objTitle" @returnClick="returnClick"></navigation>
			</view>
			<!--  -->
			<u--input placeholder="请输入城市" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				shape="square" clearable @change="inputChange"></u--input>
			<!--  -->
			<view class="jh-text-grey jh-m-tb-30 jh-flex jh-m-l-10">
				<view class="jh-flex">
					<text class="jh-m-r-20">当前城市</text>
					<u-icon name="map-fill" color="#04BC16" size="15"></u-icon> <text
						class="jh-text-green">{{nowCity}}</text>
				</view>
				<view class="jh-flex jh-m-l-90">
					<text class="jh-m-r-20">已选城市</text>
					<text class="jh-text-green">{{cityTxt ? cityTxt : '暂无选择城'}}市</text>
				</view>
			</view>
			<u-gap height="1" bgColor="#dedede"></u-gap>
			<!--  -->
			<view class="jh-text-grey jh-p-tb-20 jh-m-l-10">热门城市</view>
			<u-gap height="1" bgColor="#dedede"></u-gap>
			<!-- 热门城市 -->
			<view class="jh-flex jh-m-t-30 jh-flex-wrap jh-text-grey">
				<view v-for="(item,index) in cityData" :key="index"
					class="jh-lines-grey jh-b-round  jh-solid jh-w-p-20 jh-h-60 jh-l-h-60 jh-text-center  popularCities"
					@click="citySelection(item)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<!-- 地区列表 -->
		<view class="">
			<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 50vh;"> -->
			<u-index-list :index-list="indexList" :customNavHeight="398" activeColor="#04BC16">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor v-if="typeTitel"> -->
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]" v-if="typeTitel"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, i) in item" :key="i" @click="citySelection(item[i])">
							{{cell}}市
						</view>
					</u-index-item>
				</template>
			</u-index-list>
			<!-- </scroll-view> -->
		</view>
	</view>
</template>

<script>
	import navigation from "components/navigation/index.vue"
	import ctiyList from "./citylist.json"
	export default {
		components: {
			navigation,
		},
		data() {
			return {
				typeTitel: true,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T",
					"W",
					"X", "Y", "Z"
				],
				itemArr: ctiyList.city,
				objTitle: {
					leftIcon: 'arrow-left',
					title: '选择城市',
					right: '确定',
				},
				cityData: ['上海', '北京', '广州', '深圳', '武汉', '天津', '西安', '南京'],
				// 所选城市
				cityTxt: '',
				// 当前定位城市
				nowCity: ''
			}
		},
		onShow() {
			this.nowCity = uni.getStorageSync('cityTxt');
		},
		onLoad() {},
		methods: {
			returnClick() {
				uni.setStorageSync('cityTxt', this.cityTxt);
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 搜索城市
			inputChange(val) {
				console.log(this.itemArr[0][0]);
				if (val) {
					var arr = [] //定义一个空数组
					this.itemArr.forEach(el => {
						if (el) {
							el.forEach(e => {
								if (val == e) {
									this.typeTitel = false
									arr.push([e])
									if (val != arr[0][0]) {
										arr = []
									}
									console.log(arr, '查询到的');
									this.itemArr = arr
								}
							})
						}
					})
				} else {
					this.typeTitel = true
					this.itemArr = ctiyList.city
				}
			},
			//
			scroll() {},
			// 选择城市
			citySelection(item) {
				this.cityTxt = item
			}
		}
	}
</script>

<style>
	::v-deep.u-input--radius.data-v-fdbb9fe6,
	.u-input--square.data-v-fdbb9fe6 {
		width: 100% !important;
		border-radius: 100rpx !important;

	}

	.u-nav-slot {
		display: flex;
	}

	.position-navbar {
		width: 100%;
	}

	.content-box {
		width: 96%;
		margin: auto;
	}

	.popularCities {
		margin: 0 15rpx 20rpx 15rpx;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background-color: white;
		/* margin: auto; */
		/* padding: 0 20rpx; */
		/* 	display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */

	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1rpx solid gainsboro;
		border-top: 1rpx solid gainsboro;
	}
</style>